<template>
<div class="container">
    <div class="page-head">
        <div class="left">
            <el-form :inline="true" :model="query" @submit.native.prevent>
                <el-form-item>
                    <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="addRole('create')">添加</el-button>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="query.keyword" placeholder="角色名称" style="width: 200px" class="filter-item" clearable @clear="doSearch" />
                </el-form-item>
                <el-form-item>
                    <el-button class="filter-item" type="primary" size="small" icon="el-icon-search" native-type="submit" @click="doSearch">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <el-table ref="tableView" height="tableHeight" class="page-body" :data="roleList" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column label="ID" align="center" width="95">
            <template slot-scope="scope">
                {{ scope.row.id }}
            </template>
        </el-table-column>
        <el-table-column label="角色名称">
            <template slot-scope="scope">
                {{ scope.row.title }}
            </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="300px">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="editRole('edit', scope.row)">编辑</el-button>
                <el-button type="text" size="small" v-if="scope.row.delable == 1" @click="deleteRole(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="page-foot">
        <div class="left">

        </div>
        <div class="right">
            <common-pagination :total="pg.total" :page.sync="pg.page" :limit.sync="pg.limit" @getList="getTableData"></common-pagination>
        </div>
    </div>

    <!-- 编辑名称 -->
    <update-name ref="editRef" @getTableList="getTableData"></update-name>
</div>
</template>

<script>
import pagination from "@/components/mixins/pagination.vue";
import {
    getRoleListApi,
    deleteRoleApi
} from "@/api/auth/role";

import updateName from "./edit.vue";
export default {
    components: {
        updateName
    },
    mixins: [pagination],
    data() {
        return {
            query: {
                keyword: "",
            },

            roleList: [{
                id: 1,
                name: "超级管理员",
                count: 99,
            }, ],
        };
    },
    created() {
        // 获取列表
        this.getTableData();
    },
    methods: {
        doSearch() {
            this.resetPg();
            this.getTableData();
        },
        // 获取列表信息
        getTableData() {
            let params = Object.assign({}, this.query);
            params["pagination"] = this.pg;
            getRoleListApi(params).then((res) => {
                if (res.code == 200) {
                    this.roleList = res.data.list;
                    this.setPg(res);
                } else {
                    this.$message.warning(res.msg);
                }
            });
        },
        // 添加角色
        addRole(type) {
            this.$refs["editRef"].showDialog(type);
        },

        // 编辑名称
        editRole(type, data) {
            this.$refs["editRef"].showDialog(type, data);
        },

        // 权限配置
        setPower(data) {
            this.$refs["power"].showDialog(data)
        },

        // 删除角色
        deleteRole(data) {
            let query = data;
            this.$confirm("是否删除角色?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(() => {
                    deleteRoleApi(query).then((res) => {
                        if (res.code == 200) {
                            this.$message.success(res.msg);
                            this.getTableList();
                        } else {
                            this.$message.warning(res.msg)
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
    },
};
</script>
